<!-- 复制组件 -->
<template>
  <el-button link :style="style" :title="t('common.copy')" @click="handleClipboard">
    <slot>
      <el-icon><DocumentCopy color="var(--el-color-primary)" /></el-icon>
    </slot>
  </el-button>
</template>

<script setup lang="ts">
import { ElButton, ElIcon, ElMessage } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'

const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  style: {
    type: Object,
    default: () => ({}),
  },
  // 国际化函数
  t: {
    type: Function,
    default: (key: string) => {
      const translations: Record<string, string> = {
        'common.copy': '复制',
      }
      return translations[key] || key
    },
  },
})

function handleClipboard() {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    // 使用 Clipboard API
    navigator.clipboard
      .writeText(props.text)
      .then(() => {
        ElMessage.success('Copy successfully')
      })
      .catch((error) => {
        ElMessage.warning('Copy failed')
        console.log('[CopyButton] Copy failed', error)
      })
  } else {
    // 兼容性处理
    const input = document.createElement('input')
    input.style.position = 'absolute'
    input.style.left = '-9999px'
    input.setAttribute('value', props.text)
    document.body.appendChild(input)
    input.select()
    try {
      const successful = document.execCommand('copy')
      if (successful) {
        ElMessage.success('Copy successfully!')
      } else {
        ElMessage.warning('Copy failed!')
      }
    } catch (err) {
      ElMessage.error('Copy failed.')
      console.log('[CopyButton] Copy failed.', err)
    } finally {
      document.body.removeChild(input)
    }
  }
}
</script>
